<template>
	<div class="quick-entry">
		<swiper>
			<swiper-slide v-for='(page,index) in pages' :key='index'> 
				<ul class="list">
					<li v-for='item in page' :key='item.id'>
						<a href="#" class="item">
							<img :src="item.imgUrl" class="pic">
							<div class="text">{{item.desc}}</div>
						</a>
					</li>
				</ul>
			</swiper-slide>	
		</swiper>				
	</div>
</template>
<script type="text/javascript">
	export default{
		props:['quickEntryList'],
		computed:{
			pages(){
				var pages=[]
				this.quickEntryList.forEach((item,index)=>{
					var page=Math.floor(index/10)
					if(!pages[page]){
						pages[page]=[]
					}
					pages[page].push(item)
				})
				return pages
			}
		}
	}
</script>
<style lang="less" scoped>
	@import '../common/css/mixins.less';
	
	.quick-entry{
		margin-top: 10px;
		.swiper-container{
			width: 100%;
			height: 125px;
			background: #fff;
		}
		.list{
			width: 100%;
			height: 100%;
			overflow: hidden;
			li{
				float: left;
				width: 20%;
				height: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.item{
					width: 100%;	
					text-align: center;
					.pic{
						width: 22px;
						height: 22px;
						margin-bottom: 5px;
					}
					.text{
						width: 100%;
						.ellipsis
					}
				}
			}
		}
	}	
</style>